<template>
<div class='ttyd'  element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.6)"
    v-loading="loading">
  <!-- <div class="header"> -->
    <!-- <Header
      :menuTitle="menuTitle"
      :navGuideName="navGuideName"
      :menuName="menuName"></Header> -->
  <!-- </div> -->
  <NavControl/>
  <div class="content">
    <!-- 右侧区域 -->
    <div id="map" class="right-wrap">
      <div class='rmap'>
        <MapControl :isColumn="true" mapTypes="vector_vector" :isSplitScreen="false" :isFloatTest="true"/>
      </div>
      <div class="rmap-title" :class="'imp'+currentBorder">
        <span>{{menuName}}</span> :
        <span v-if="currentBorder==2 && (curindex == 2||curindex == 3)?false:true">{{rmapprename}}</span>
        <span>{{rmapname}}</span>{{rmapunit}} <sub>[{{modelMijiDict[menuName]}}]</sub><br>
        <cite class="rmap-name">
          <span class="rmap-name">当前选择：{{curyear}}年</span>
          <span class="rmap-name">{{curmonth==13?' 全年':` ${curmonth}月`}},</span>
          <span class="rmap-name region" v-for="(rt, index) in arealist.r" @click="regionobjHandle(rt)" :key="index">
            {{rt.regionname}}
            <template v-if="index>=0 && index < arealist.r.length-1">
              >
            </template>
          </span>
        </cite>
      </div>
      <!-- 时间选择 -->
      <div class="rfactor">
        <ImpBorder></ImpBorder>
        <div class="rfa rtime">
          <div class="txt timeselect"><p>时间选择</p></div>
          <div class="rtime-container">
              <div class="rtime-year" :class="'imp'+currentBorder">
                <span v-for="(year,index) in yearlist"
                      :class="year==curyear?'active':''"
                      @click="clickyear(year)"
                      :key="index">
                  {{year}}
                </span>
                <p class="txtyear">年</p>
              </div>
                <div class="rtime-slider">
                  <!-- 2020年到7月，2019年到12月 -->
                  <TimeSlider :min="1" :max="curyear=='2020'?8:13" :step=1 labels :values="[curmonth]" :timeColor="currentBorder"></TimeSlider>
                </div>
          </div>
        </div>
        <!-- 区域选择 -->
        <div class="rfa space-factor">
          <div class="txt space"><p>空间选择</p></div>
          <div class="select-area">
            <div>当前选择区域：</div>
            <div class="areaSelectStyle" :class="'imp'+currentBorder">
              <span  v-for="(rt, index) in arealist.r" @click="regionobjHandle(rt)" :key="index">
                {{rt.regionname}}
                <template v-if="index>=0 && index < arealist.r.length-1">
                  >
                </template>
              </span>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>

          <div class="area-list-box">
              <ul class="arealist" v-if="curRegionLevel == '1'? true : false" :class="showAll==false?'downHeight':'upHeight'">
                <div style="display:flex;justify-content:space-around;">
                  <li
                    v-for="(item,index) in arealist.rs"
                    :key="index"
                    class="arealist_level1"
                    v-if="index<8"
                    >
                    <span @click="regionobjHandle(item)" class="areaHoverStyle" :class="'imp'+currentBorder">{{item.regionname}}</span>
                  </li>
                </div>
                <div style="display:flex;justify-content:space-around;">
                  <li
                    v-for="(item,index) in arealist.rs"
                    :key="index"
                    class="arealist_level1"
                    v-if="index>=8"
                    >
                    <span @click="regionobjHandle(item)" class="areaHoverStyle" :class="'imp'+currentBorder">{{item.regionname}}</span>
                  </li>
                </div>
              </ul>
              <ul class="arealist" v-if="curRegionLevel == '1'? false : true" :class="showAll==false?'downHeight':'upHeight'">
                <li
                  v-for="(item,index) in arealist.rs"
                  :key="index"
                  >
                  <span  @click="regionobjHandle(item)" class="areaHoverStyle" :class="'imp'+currentBorder">{{item.regionname}}</span>
                  <span  v-if="index==arealist.rs.length-1?false:true">|</span>
                </li>
              </ul>
              <div
                :class="showAll==false?'arrowdown':'arrowup'"
                v-if="curRegionLevel == '1'? false : true" >
                  <i :class="showAll==false?'el-icon-bottom':'el-icon-top'"  @click="slideUpDown">
                  </i>
              </div>
          </div>

        </div>
      </div>

      <!-- 地拆违人口产业的左侧指标 -->
      <div class="rindex">
        <template v-if="!loading" >
            <div class="rindex-box"
              v-for="(rindexlist,index) in rindexlists"
              :key="index"
              :class="['imp'+currentBorder,index==curindex?'active':'']"
              @click="updateIndex(rindexlist)">
              <ImpBorder  v-if="rindexlist.length>0"></ImpBorder>
              <div class="rindex-list" v-for="(item,index) in rindexlist.filter(item=>Object.keys(item).length>0)" :key="index">
                <div class="rindex-title"> {{item.name}} <p>{{item.unit}}</p></div>
                  <p class="rindex-num">
                    <strong>{{item.num == null ? '0.00' :item.num}}</strong>
                  </p>
                  <el-divider v-if="index<(rindexlist.length-1)"></el-divider>
              </div>
          </div>

       </template>
      </div>

      <div class="rchart">
        <!-- 图表组件 -->
        <ChartBox v-if="!loading" :borderColorActive="currentBorder" :chartlist="curChartData"/>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import TimeSlider from '@/components/TimeSlider'
import NavControl from '@/components/NavControl'
import ImpBorder from '@/components/ImpBorder'
import MapControl from '@/components/MapControl'
import bus from '@/modules/eventbus'
import qs from 'qs'
// 封装的v-chart图表
import ChartBox from '@/components/VCharts/chartbox'
/**
 * 图表测试数据
 */
import { chartDatas } from '@/components/VCharts/chartdata'

export default {
  name: 'ttyd',
  components: {
    TimeSlider,
    ImpBorder,
    MapControl,
    ChartBox,
    NavControl
  },
  data () {
    return {
      current: 0,
      loading: false,
      rindexlists: [],
      /**
       * 头部信息
       */
      menuTitle: '', // 文字信息
      navGuideName: '',
      menuName: '',
      routename: '', // 路由name(动态匹配路由名称)
      /**
       * 地图信息
       */
      rmapname: '', // 地图名称
      rmapprename: '',
      rmapunit: '', // 地图单位
      regionname: '北京',
      /**
       * 界面状态信息
       */
      // rentBorder: 0, // 四角边框激活状态//左侧菜单按钮状态
      /**
       * 列表信息
       */
      charts: [], // 图表数据列表
      yearlist: [2020, 2019], // 2018,
      arealist: [], // 区域数据列表
      showAll: false, // 区域列表是否全部显示
      mapdatalist: [], // 地图数据
      /**
       * 图表测试数据
       */
      chartdatas: [],
      modelMijiDict: { '用地腾退': '机密', '违建拆除': '机密', '人口疏解': '机密', '产业提质': '机密' }
    }
  },
  computed: {
    // 当前索引变量
    currentBorder () {
      return this.$route.meta.id
    },
    /**
     * 图表测试数据
     */
    chartDatas () {
      return chartDatas
    },
    mapdata () {
      return this.mapdatalist[this.curindex]
    },
    curChartData () {
      // console.log(this.charts[this.curindex])
      return this.charts[this.curindex]
    },
    // ---------------------store中的值---------------------------
    curindex: {
      set (val) {
        this.$store.state.index = val
      },
      get () {
        return this.$store.getters.curindex
      }
    },
    paramsCondition () {
      return this.$store.getters.paramsCondition
    },
    curregionobj: {
      set (val) {
        this.$store.state.regionobj = val
      },
      get () {
        return this.$store.getters.curregionobj
      }
    },
    curyear () {
      return this.$store.getters.curyear
    },
    curmonth () {
      return Number(this.$store.getters.curmonth)
    },
    curRegionCode () {
      return this.$store.getters.curRegionCode
    },
    curRegionLevel () {
      return this.$store.getters.curRegionLevel
    },
    curApiUrl () {
      return this.$store.getters.curApiUrl
    }
  },
  methods: {
    slideUpDown () {
      this.showAll = !this.showAll
    },
    // 指标点击（待修改）
    updateIndex (obj) {
      let item = obj[0]
      // obj.map(item=>{
      if (item.unit == '居住人口变化(万人)') {
        this.curindex = 0
      } else if (item.unit == '就业人口变化(万人)') {
        this.curindex = 1
      }
      // 人口疏解：初始化区域
      this.rmapunit = item.unit
      this.rmapname = item.name
      this.$store.dispatch('changeMapData', this.mapdatalist[this.curindex])
      // })
    },
    // 年份选择
    clickyear (year) {
      this.$store.dispatch('changeParamsObj', {
        year: year,
        month: year === 2020 ? 8 : 13
      })
    },
    // 区域选择（待修改）
    regionobjHandle (regionObj) {
      /*
      regionObj：包含regionname、regioncode
      */
      // 每次点击，收回菜单
      this.showAll = false
      const robj = regionObj
      let clevel = this.curRegionLevel
      let level = 0

      if (String(robj.regioncode).length == 6) {
        // 北京市
        if (String(robj.regioncode) == '110000') {
          level = 1
        // 区县
        } else {
          level = 2
        }
      // 乡镇
      } else if (String(robj.regioncode).length > 6) {
        if (robj.regionname == undefined) {
          level = 4
        } else {
          level = 3
        }
      }
      this.$store.dispatch('changeParamsObj', {
        regioncode: robj.regioncode,
        regionlevel: level
      })
    },
    // 菜单选择（待修改）
    changeColor (item) {
      // console.log('菜单选择')
      // // this.curColorIndex = 0
      // this.$store.dispatch('changeColorIndex', item.id)
      // this.menuName = item.name
      // this.currentBorder = item.id + 1

      // return false
      // // 菜单
      // if (this.$route.path !== '/spotsdetail') {
      //   this.$store.dispatch('changeParamsObj', {
      //     year: this.curyear,
      //     month: this.curmonth
      //     // regioncode: '110000',
      //     // regionname: '北京',
      //     // regionlevel: '1'
      //   })
      // }

      // // ~~~~~~~~~每次切换不同的菜单 年份需要重置为指定年份~~~~~~~~
      // let year = '2019'
      // let month = '9'
      // switch (item.id) {
      //   case 0:
      //     // 腾退用地
      //     this.currentBorder = item.id + 1
      //     year = '2019'
      //     month = '13'
      //     break
      //   case 1:
      //     // 违建拆除
      //     this.currentBorder = item.id + 2
      //     year = '2019'
      //     month = '13'
      //     break
      //   case 2:
      //     // 人口疏解
      //     this.currentBorder = item.id
      //     year = '2019'
      //     month = '13'
      //     break
      //   case 3:
      //     // 产业提质
      //     this.currentBorder = item.id + 1
      //     year = '2019'
      //     month = '13'
      //     break
      //   default:
      //     break
      // }
      // /**
      //  * 注意：以防加载多遍
      //  * （1）使用了changeParamsObj；
      //  * （2）不能分别触发每一个方法 如：changemonth.changeyear...
      //  */
      // // ~~~~~~~~~~~重置各要素指标（年份，月份，指标index，空间选择北京市）~~~~~~~~~~
      // if (this.$route.path != '/spotsdetail') {
      //   this.$store.dispatch('changeParamsObj', {
      //     year: year,
      //     month: month,
      //     regioncode: '110000',
      //     regionname: '北京',
      //     regionlevel: '1'
      //   })
      // }
    },

    // 更新数据（待修改）
    updatedata (year, month, regioncode) {
      console.log('数据更新')

      // 初始化
      this.loading = true
      let self = this
      // 初始化数据
      this.rindexlists = []
      this.charts = []
      this.mapdatalist = []
      this.rmapprename = ''
      this.rmapname = ''
      this.rmapunit = ''
      // 定义参数
      let params = {
        year: year || this.curyear,
        regioncode: regioncode || this.curRegionCode,
        month: month || this.curmonth
      }

      this.$store.dispatch('changeMapData', [])

      // 空间选择的区域数据
      this.$axios.get(`${this.curApiUrl}/api/regionlist?params=${JSON.stringify(params)}`)
        .then(res => {
          if (res.data.rs.length !== 0) {
            this.arealist = res.data
          }

          // 解决：进入图斑页面，地图层级改变为4时触发了请求数据的问题
          if (this.curRegionLevel !== '4' && this.routename !== 'anualwj') {
            console.log('请求url：')
            console.log(`${self.curApiUrl}/api/${self.routename}?params=${JSON.stringify(params)}`)
            this.$axios.get(`${self.curApiUrl}/api/${self.routename}?params=${JSON.stringify(params)}`)
              .then(res => {
                if (res.data.rindexlist.length > 0) {
                  self.rindexlists = res.data.rindexlist
                  // // 默认指标对应值
                  self.rmapprename = self.rindexlists[0][0].prename || ''
                  self.rmapname = self.rindexlists[0][0].name
                  self.rmapunit = self.rindexlists[0][0].unit
                  self.charts = res.data.charts
                  self.mapdatalist = res.data.map
                  self.$store.dispatch('changeMapData', self.mapdatalist[self.curindex])
                }
                self.loading = false
              })
              .catch(error => {
                self.loading = false
                console.log(error)
              })
          }
        })
        .catch(error => {
          self.loading = false
          console.log(error)
          // this.$store.dispatch('changeMapData', [])
        })

      // console.log('-----------数据更新变化-----------')
    }
  },
  watch: {
    // 路由变化（待修改）
    $route: {
      handler (val, oldval) {
        console.log('路由更新')
        if (localStorage.getItem('model')) {
          let mijiDic = { 1: '机密', 2: '秘密', 3: '内部' }
          let modelDict = { 1: '用地腾退', 2: '违建拆除', 3: '人口疏解', 4: '产业提质' }
          let model = JSON.parse(localStorage.getItem('model'))
          let keys = Object.keys(model)
          for (let i = 0; i < keys.length; i++) {
            this.modelMijiDict[modelDict[i + 1]] = mijiDic[model[i + 1]]
          }
        }
        /**
           * 每次返回时 再进入图斑页tab重置
           *
           */
        if (val.path === '/spotsdetail') {
          this.$store.dispatch('changeVisibleState', false)
          let tabvalueobj = {
            leftval: 'ygyx_ygyx',
            rightval: 'ygyx_ygyx',
            leftyear: '2019',
            rightyear: '2018',
            leftmonth: '12',
            rightmonth: '12',
            activeYearIndexLeft: 1,
            activeYearIndexRight: 0,
            isVisibleRight: false,
            isVisibleLeftTime: true,
            isVisibleRightTime: true
          }
          this.$store.dispatch('changetabvalue', tabvalueobj)
        } else {
          // 修改颜色索引
          this.$store.dispatch('changeColorIndex', this.currentBorder)

          // 暂时不用的属性
          this.menuTitle = this.$route.meta.menuTitle
          this.navGuideName = this.$route.meta.navGuideName

          // 当前菜单名称
          this.menuName = this.$route.meta.name
          // 路由名称
          this.routename = this.$route.name

          this.$store.dispatch('changeParamsObj', {
            year: this.curyear,
            month: this.curmonth,
            regioncode: '110000',
            regionname: '北京',
            regionlevel: '1'
          })
        }

        // this.currentBorder = this.$route.meta.id + 1 == 2
        //   ? 3
        //   : this.$route.meta.id + 1 == 3
        //     ? 2
        //     : this.$route.meta.id + 1
        // this.menuTitle = this.$route.meta.menuTitle
        // this.navGuideName = this.$route.meta.navGuideName
        // this.menuName = this.$route.meta.name
        // this.$store.dispatch('changeColorIndex', this.$route.meta.id)
        // this.routename = this.$route.name

        // /**
        //    * 除图斑页的重置
        //    */
        // if (oldval && oldval.path != '/spotsdetail') {
        //   // 指标项重置为0
        //   this.$store.dispatch('changeindex', 0)
        //   // 清空地图数据
        //   this.$store.dispatch('changeMapData', [])
        //   // 每次从向导页进入主页时，各指标都要重置（解决上次点击记录的页面问题）
        //   this.changeColor(this.$route.meta)
        // }

        // return false
        // 对接分保
        let curBrower = ''
        let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
        let isOpera = userAgent.indexOf('Opera') > -1
        if (userAgent.indexOf('Firefox') > -1) { // 判断是否Firefox浏览器
          curBrower = '火狐浏览器'
        }
        if (userAgent.indexOf('Chrome') > -1) { // 判断是否Chrome浏览器
          curBrower = '谷歌浏览器'
        }
        if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) { // 判断是否IE浏览器
          curBrower = 'IE浏览器'
        };

        this.$axios.post(window.appcfg.fbServer + '/databi/log/save2', qs.stringify({
          username: localStorage.getItem('name'),
          department: '系统管理',
          uid: localStorage.getItem('uid'),
          state: 0,
          model: '2',
          modelname: this.$route.meta.name,
          content: '页面浏览',
          devicename: curBrower,
          kind: '0',
          level: '6'
        })).then(res => {
          console.log(res)
        })
      },
      immediate: true
    },
    // 深度监听条件状态变化
    paramsCondition: {
      deep: true,
      handler: function (val) {
        console.log('参数更新了！！！')
        this.updatedata(String(val.year), String(val.month), val.regioncode)
      },
      immediate: true
    }
  },
  mounted () {
    // ~~~~~~~~~~~解决重新初始化时个指标 和 时间重置~~~~~~~~~~
    // this.changeColor(this.$route.meta)

    // 下钻操作：
    // 1、地图操作，地图属性或数据变化（是否有操作地图）
    // 2、前端得到属性或参数，更新code
    // 3、地图监听属性或参数的变化

    // 点击地图下钻时 地图和空间选择名称同步
    bus.$on('drillDownName', target => {
      this.regionobjHandle(target)
    })
    // 上钻
    bus.$on('returnName', target => {
      this.regionobjHandle(target)
    })
    /**
     * 图表测试数据
    */
    // this.chartdatas = this.chartDatas
  }
}
</script>
<style lang='stylus' scoped>
.home-nav
  height 65px
  width 100%
  padding-left 38px
  padding-top 5px
  ul
    border-top 2px solid #1a55b9
    width 775px
    margin 0 auto
    li
      display inline-block
      height 50px
      width 151px
      margin-right 5px
      background url('../../assets/nav2.png') no-repeat
      text-align center
      line-height 50px
      font-size 20px
      text-shadow 0 0 5px rgba(255,255,255,.3)
      font-weight bold
      cursor pointer
      &:last-child
        margin-right 0

      &.active
        background url('../../assets/nav1.png') no-repeat

// 路由菜单（腾退用地,违建拆除...）
.rmap
  width 100%
  height 100%

.rmap-title
  position absolute
  z-index 20
  top 95px
  left 30%
  font-weight 600
  font-size 20px
  width 500px
  height 100px
  text-align center
  line-height 25px
.rmap-name
  font-size 16px
  font-weight 100
  font-style normal
.rmap-name.region
  &:hover
    font-weight 600
    cursor pointer

.rnav
  width 54px
  height 100%
  background #0b1a43
  box-shadow 10px 0px 10px rgba(0,0,0,0.9)
  position absolute
  z-index 20

  ul
    width 100%
    height 100%
    display flex
    flex-direction column

    li
      flex 1
      cursor pointer
      display flex
      flex-direction column
      justify-content center
      align-items center
      color #9B9B9B
      border-bottom 1px solid #9b9b9b
      margin 0 10px
      &:last-child
        border-bottom none
      // -moz-box-shadow 1px 1px 5px #0A1A41 inset
      // -webkit-box-shadow 1px 1px 5px #0A1A41 inset
      // box-shadow 1px 1px 5px #0A1A41 inset

      p
        width 18px
        // font-size 18px

// 要素选择
.rfactor
  margin-left 20px
  width calc(100% - 44px)
  // height 80px
  position absolute
  z-index 50 //空间选择要素过多 展开级别加大
  display flex
  border 1px solid #aaa
  -moz-box-shadow 0 0 5px #aaa inset
  -webkit-box-shadow 0 0 5px #aaa inset
  box-shadow 0 0 5px #aaa inset
  align-items center
  background #0a1a41

  .space-factor
    display flex
    width 65%
    height 100%
    align-items center
    position relative

    .select-area
      width 18%
      height 100%
      display flex
      flex-direction column
      justify-content center
      color #aaa
      font-size 16px
      // font-weight bold
      .areaSelectStyle
        white-space nowrap
        span
          cursor pointer
          &:hover
            font-weight bold

    .area-list-box
      height  100%
      // width 75%
      margin-right 10px
      display flex
      align-items center
      color #aaa
      font-size 16px
      position absolute
      right 0
      top 0
      .arealist
        width 100%
        margin 1px 0
        position absolute
        top 10px
        left 0
        // height 50px
        overflow hidden
        // background #0B194A
        // box-shadow 3px 3px 3px rgba(0,0,0,0.5)
        // text-overflow ellipsis

        li
          display inline-block
          font-weight normal
          cursor pointer
          &:last-child
            position relative
          span
            padding 0px 5px

  .rtime
    display flex
    width 35%
    position relative
    align-items center
    margin-top 0px !important
    z-index 1

    .rtime-container
      width 100%
      line-height 20px

      @media screen and (min-width: 2000px)
        width 80%

      .rtime-year
        margin 7px 0
        color #aaa
        font-size 14px
        span
          padding-right 7px
          cursor pointer

        .txtyear
          display inline-block

      .rtime-slider
        line-height 15px
        .slider-pips
          width 101%

      .rtime-month
        position absolute
        // right 25px
        // top -3px
        top 45px
        // line-height 80px
        font-size 14px
        color #aaa

  .search
    margin-right 10px
    line-height 80px

  .el-divider
    height 65%
    margin 12px 15px

.rindex
  // width 180px
  // height calc(100% - 120px)
  position absolute
  left 20px
  // top 110px
  z-index 20
  display flex
  flex-direction column
  // flex-wrap wrap
  .rindex-list
    text-align center
    padding-top 15px
  .rindex-title
    // margin-top 30px
    .rindex-title-prename
      font-style italic
      color #aaa

  .datatip
    width 100%
    height 100%
    text-align center
    background linear-gradient(to right, rgba(62,73,103,0.7), #303a58)
    font-size 16px
    p
      padding-top 150px

  .rindexitem
    opacity 0.7
    border 1px solid #aaa
    position relative
    text-align center
    // padding 10px
    // margin-bottom 10px
    -moz-box-shadow 1px 1px 5px #aaa inset
    -webkit-box-shadow 1px 1px 5px #aaa inset
    box-shadow 1px 1px 5px #aaa inset
    // flex 1
    margin-right 5px
    // background rgba(69,83,112,1)
    cursor pointer
    display flex
    flex-direction column
    justify-content center
    &:last-child
      margin-bottom 0
    &:hover,
    &.active
      background rgba(10,26,65,1)
      box-shadow 1px 1px 5px inset
      opacity 1

      //   font-size 40px
      // span.red
      //   color red
      // span.green
      //   color green
      cite
        // font-size 16px
        margin-right 10px
    b
      // font-size 22px
    .rindex-num
      line-height 55px
      font-size 42px
.rindexmore
  .rindexitem
    b
      // font-size 18px
    p
      strong
        // font-size 34px
      cite
        // font-size 14px
        // margin-right 10px

.rindexlit
  // width 180px
  // height calc(100% - 333px)

.rchart
  position absolute
  right 22px
  z-index 20
  bottom 0
  top 95px
  width 32%
  height calc(100% - 100px)

  .datatip
    width 100%
    height 100%
    text-align center
    background linear-gradient(to right, rgba(62,73,103,0.7), #303a58)
    font-size 16px
    p
      padding-top 150px

// 边角
.rnav ul li.style0
  // background #ffeb3b
  color #ffeb3b
  font-size 18px
  font-weight 600
  // -moz-box-shadow 1px 1px 5px #ffeb3b inset
  // -webkit-box-shadow 1px 1px 5px #ffeb3b inset
  // box-shadow 1px 1px 5px #ffeb3b inset

.rnav ul li.style1
  color #e91e63
  font-size 18px
  font-weight 600
  // background #e91e63
  // -moz-box-shadow 1px 1px 5px #e91e63 inset
  // -webkit-box-shadow 1px 1px 5px #e91e63 inset
  // box-shadow 1px 1px 5px #e91e63 inset

.rnav ul li.style2
  color #009688
  font-size 18px
  font-weight 600
  // background #009688
  // -moz-box-shadow 1px 1px 5px #009688 inset
  // -webkit-box-shadow 1px 1px 5px #009688 inset
  // box-shadow 1px 1px 5px #009688 inset

.rnav ul li.style3
  color #00bcd4
  font-size 18px
  font-weight 600
  // background #00bcd4
  // -moz-box-shadow 1px 1px 5px #00bcd4 inset
  // -webkit-box-shadow 1px 1px 5px #00bcd4 inset
  // box-shadow 1px 1px 5px #00bcd4 inset

// .bordercolor0
//   border-right 6px solid #ffeb3c

// .bordercolor1
//   border-right 6px solid #e91e63

// .bordercolor2
//   border-right 6px solid #009688

// .bordercolor3
//   border-right 6px solid #00bcd4

// 文本公共样式
.txt.space
  margin-left 40px
.txt
  font-size 20px
  margin 0 10px 0 10px
  font-weight bold
  display flex
  flex-direction column
  justify-content center
  p
    width 50px
    text-align center
    line-height 30px

.area-scroll-bar
  height 30px

.areaHoverStyle
  cursor pointer

.arealist_level1
  flex 1
  width 100%
  text-align center

  span
    display inline-block
    position relative
    width 100%
    padding 0!important

    &:after
      content ''
      position absolute
      top 6px
      right 0
      width 1px
      height 16px
      background #aaa

  &:last-child span:after
    width 0

// 年份（人口和产业禁止点击的年份）
.rtime-year span.disactive
  pointer-events none
  display none

// 分割线
.el-divider
  background-color #aaa

.arrowdown
  position absolute
  right 5px
  top 55px
  cursor pointer
.arrowup
  position absolute
  right 5px
  top 110px
  cursor pointer

.downHeight
  height 50px

.upHeight
  height 120px
  background #0B194A
  box-shadow 3px 3px 3px rgba(0,0,0,0.5)

// 用地 违建 指标
.rindex
  .rindex-box
    box-shadow 1px 1px 5px inset
    background rgba(69,83,112,1)
    position relative
    cursor pointer
    margin-top 10px
    .rindex-list
      .rindex-title
        // margin-top 15px
      .rindex-num
        line-height 40px
      .el-divider--horizontal
        margin 0 20px
        width 78%
  .rindex-box.active
    background #0a1a41
sub{
    bottom: 0em;
}
</style>
